<template>
  <el-scrollbar class="app-menu-left">
    <el-menu 
      :router="true"
      :collapse="true"
      :default-active="defaultActivePath"
      active-text-color="#fff"
    >
        <Items :items="items"/>
    </el-menu>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
.app-menu-left {
  border-right: solid 1px #dcdfe6;
  width:65px;
  .el-menu{
      border-right:none;
      :deep(.el-menu-item.is-active){
 
            background-color: #ff6a00;
      }
  }
}

</style>

<script>

import {
  mapGetters
} from 'vuex' ;

import Items from './Items' ;

export default {

  components:{
    Items
  },

  computed:{
    ...mapGetters('Menu' , {
      items:'first',
      isCurrentPath:'isCurrentPath'
    }),

    defaultActivePath(){

        let {
            items,
            isCurrentPath
        } = this,
        item = items.find(({
            fullPath
        }) => isCurrentPath(fullPath)) ;

        if(item){

            return item.fullPath ;
        }
    }
  }
};
</script>
